<template>
  <div class="common-layout">
    <el-container class="box">
      <!-- 左侧菜单栏 -->
      <el-aside class="el-aside">
        <h1 class="logoBox">众筹资金管理系统</h1>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            :default-active="activeTabName"
            text-color="#fff"
            :router="true"
        >
          <template v-for="item in sliderMenus">
            <template v-if="item.meta.show">
              <!-- 两级菜单 -->
              <template v-if="item.children">
                <el-sub-menu :index="item.path" :key="item?.path">
                  <!-- 一级菜单标题 -->
                  <template #title>
                    <el-icon><document /></el-icon>
                    <span>{{ item.meta.title }}</span>
                  </template>
                  <!-- 二级菜单标题 -->
                  <template v-for="subItem in item.children" :key="subItem.path">
                    <el-menu-item
                        :index="subItem.path"
                        @click="() => handleMenuItem(subItem)"
                    >{{ subItem.meta.title }}</el-menu-item
                    >
                  </template>
                </el-sub-menu>
              </template>

              <!-- 一级菜单 -->
              <template v-else>
                <el-menu-item
                    :index="item.path"
                    :key="item.meta.title"
                    @click="() => handleMenuItem(item)"
                >
                  <el-icon><document /></el-icon>
                  <span>{{ item.meta.title }}</span>
                </el-menu-item>
              </template>
            </template>
          </template>
        </el-menu>
      </el-aside>

      <el-container>
        <!-- header头部菜单 -->
        <el-header class="header">
          <el-menu
              class="el-menu-demo"
              mode="horizontal"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
          >
            <el-menu-item index="1" class="fr">{{nick_name}}</el-menu-item>
            <el-sub-menu index="2" class="fr">
              <template #title class="fr">我的工作台</template>
              <el-menu-item index="2-3" @click="exitLogin"
              >退出登陆</el-menu-item
              >
            </el-sub-menu>
          </el-menu>
        </el-header>

        <!-- 主体模块：标签页 + 当前路由内容 -->
        <el-main class="el-main">
          <el-tabs
              type="border-card"
              v-model="activeTabName"
              class="demo-tabs"
              @tab-remove="handleRemove"
              @tab-click="handleSwitchRoute"
          >
            <el-tab-pane
                v-for="item in editableTabs"
                :key="item?.path"
                :label="item?.meta.title"
                :name="item?.path"
                :closable="handleisClose(item)"
            >
            </el-tab-pane>
            <router-view />
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {Document, Location, Menu as IconMenu, Setting,} from "@element-plus/icons-vue";
import {ElMessageBox} from "element-plus";
import {routes1 as routes} from "@/router/routes";
import {userStore} from "@/stores/user";
import {storeToRefs} from "pinia";
import {removeToken} from "@/utils/auth";

export default {
  name: "MainLayout",
  mounted() {
  },
  data() {
    return {
      //当前选项卡
      activeTabName: "/home",
      //需要显示的标签数组
      editableTabs: [
        {
          // 这里不设置值，是把main作为默认页面
          path: "/home",
          name: "Main",
          meta: {title: '首页', show: true}
        }
      ],
      //左侧菜单选项配置
      sliderMenus:[],
      nick_name:undefined,
    };
  },
  components: {
    Document,
    IconMenu,
    Location,
    Setting,
  },
  watch: {
    activeTabName: function () {
      console.log("高亮的index值", this.activeTabName);
    },
  },
  created() {
    this.activeTabName = this.$route.path

    this.sliderMenus = routes.filter(item => item.name === "Layout")[0].children
    const user_store = userStore()
    const {user} = storeToRefs(user_store)
    this.nick_name = user.nick_name
    // 页面刷新
    // 根据当前路由path 找到对应的菜单
    let obj = this.sliderMenus.filter(item => item.path === this.$route.path)
    if(obj.length === 0){
      for (const slider of this.sliderMenus) {
        if(slider.children){
          obj = slider.children.filter(item => item.path === this.$route.path)
        }
      }
    }
    console.log(obj,"objobj")
    this.handleMenuItem(obj[0])
  },
  beforeMount() {

  },
  beforeCreate() {

  },
  methods: {
    handleisClose(item) {
      return item?.path !== "/home";
    },
    //点击二级菜单标题 和 没有下一级菜单的标题
    //添加显示的标签
    handleMenuItem(obj) {
      //高亮设置
      this.activeTabName = obj?.path;
      let result = this.editableTabs.findIndex((item) => {
        return item.path === obj?.path;
      });
      if (result !== -1) {
        return;
      }
      this.editableTabs.push(obj);
      console.log(this.editableTabs,"this.editableTabs")
    },

    //点击切换tab标签，切换组件
    handleSwitchRoute(tabsPaneContext) {
      let tabPaneName = tabsPaneContext.paneName;
      //处理一个特殊情况，首页的pathx 为 '' ，这里取得值为0
      if (tabPaneName === 0) {
        tabPaneName = "";
      }
      this.$router.push(tabPaneName);
    },

    //(1)移除标签，（2）返回前一个路由
    //删除: 需要当前索引 ，设置路由和高亮，上一个对象的index
    handleRemove(tabPaneName) {
      let tempArr = this.editableTabs;
      let eleIndex = this.editableTabs.findIndex((item) => {
        return item.path === tabPaneName;
      });
      //上一个路由的index
      let routeIndex;
      for (let p in tempArr) {
        if (tempArr[p].path === tabPaneName) {
          routeIndex = tempArr[p - 1].path;
        }
      }
      //高亮和退到前一个路由
      this.activeTabName = routeIndex;
      console.log(this.activeTabName,"activeTabName")
      this.$router.push( routeIndex);
      //删除当前关闭的路由标签
      this.editableTabs.splice(eleIndex, 1);
    },

    //退出登陆
    exitLogin() {
      ElMessageBox.confirm("真的要退出登陆吗?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            removeToken()
            location.href = '/login';
          })
    },
  },
};
</script>
<style>
.app-container{
  padding: 20px;
}
</style>
<style scoped>

.logoBox {
  position: absolute;
  top: 18px;
  left: 30px;
  font-size: 24px;
  color: #fff;
}

.box {
  width: 100vw;
  height: 100vh;
}
.header {
  padding: 0;
  height: 58px;
}
/* 将消息中心和我的控制台摆放在最右侧 */
.el-menu--horizontal {
  justify-content: flex-end;
}

/* 去除默认的边框样式 */
.el-header .el-menu {
  border-bottom: none;
}
.el-aside .el-menu {
  border-right: none;
}

.el-main {
  background-color: #e9eef3;
}

.el-aside {
  width: 240px;
  background: #545c64;
  padding-top: 58px;
}

/* 标签页样式 */
/* .demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
} */
.el-tabs--border-card .el-tabs__content {
  padding: 0;
}
.el-tabs--border-card > .el-tabs__content {
  padding: 0px;
}
.el-main .el-tabs__content {
  padding: 0 !important;
}
.demo-tabs > .el-tabs__content {
  background-color: brown;
  padding: 0 !important;
}
</style>
